<template>
  <div>
    <div id="darag" style="height: 100%">
      <!-- 组件库 -->
      <div class="left" ref="left">
        <!--标题-->
        <h4>组件库</h4>
        <!-- <ul @dragstart="dragStart" @dragend="dragEnd"> -->
        <ul>
          <!-- 添加自定义属性 data-type -->
          <li v-for="(val, key, index) in typeList" draggable :data-type="key" :key="index + 1"
            @click="hanldeLi(val, key)">
            <span :class="val.icon"></span>
            <p>{{ val.name }}</p>
          </li>
        </ul>
      </div>
      <!-- 展示区域 -->
      <div class="main" ref="main">

        <!-- @dragover="dragOver" -->
        <div class="view-content" @dragend="dragEnd1">

          <Draggable v-model="view" draggable=".item" chosenClass="chosen" style="width: 100%;height: 100%;">

            <template>
              <div v-for="(item, index) in view" :data-index="item.time" :key="item.time" class="item" :style="{
                top:item.options.top+'px',
                left:item.options.left+'px'
              }"
                @click="selectType(item)">
                <template v-if="item.status == 2">
                  <span style="position: absolute;bottom: 0;left: 0;">{{ index }}</span>
                  <component :is="typeList[item.type]['com']" :data="item" :className="className[item.tabType]">
                  </component>
                  <i @click="deleteItem($event, item.time)" class="el-icon-error"></i>
                </template>
              </div>

            </template>
          </Draggable>
        </div>
        <div><el-button @click="submit">导出</el-button></div>
      </div>
      <!-- 描述信息 -->
      <div class="right">
        <!-- 动态修改内容区域的值 -->
        <Index :data="props" v-if="isRight"></Index>
        <el-form ref="form" :model="form" label-width="auto">
          <h3 style="line-height: 35px;">坐标连线</h3>
          <el-form-item label="坐标" v-for="(item, index) in form.arr" :key="index">
            <el-row :gutter="10">
              <el-col :span="8">
                <el-input v-model="item.ax1"></el-input>
              </el-col>
              <el-col :span="8">
                <el-input v-model="item.ax2"></el-input>
              </el-col>
              <el-col :span="5" v-if="index != 0">
                <el-button type="danger" icon="el-icon-delete" circle @click="hanldeDeta(index)"></el-button>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-button type="primary" @click="hanldeAdd">添加</el-button>
              </el-col>
              <el-col :span="12">
                <el-button type="primary" @click="hanldeGen">连线</el-button>
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div>{{ computdata }}</div>
  </div>
</template>

<script>


//两点画直线
import { drawLine } from '../utils/common'
import Draggable from "vuedraggable";
// 文本
import h_Text from "../components/main/text/text.vue";
// 图片
import h_Image from "../components/main/image/image.vue";
// 搜索
import h_search from "../components/main/search/search.vue";
// 公告
import h_notice from "../components/main/notice/notice.vue";
// 视频
import h_video from "../components/main/video/video.vue";
// 轮播图
import h_swiper from "../components/main/swiper/swiper.vue";
// 商品列表
import h_product from "../components/main/product/product.vue";
// 分割线
import h_divider from "../components/main/divider/divider.vue";
// 商店介绍
import h_shop from "../components/main/shop/shop.vue";
// 进入店铺
import h_store from "../components/main/store/store.vue";
// 内容卡片
import h_card from "../components/main/card/card.vue";
// 导航
import h_menu from "../components/main/menu/menu.vue";
// 导航广告
import h_menuad from "../components/main/menuad/menuad.vue";
import h_zhexian from "../components/main/zhexian/zhexian.vue";

import Index from "../components/Edit/index.vue";
export default {
  components: {
    Draggable,
    h_Text: h_Text,
    h_Image: h_Image,
    Index: Index,
    h_search: h_search,
    h_notice: h_notice,
    h_video: h_video,
    h_swiper: h_swiper,
    h_product: h_product,
    h_divider: h_divider,
    h_shop: h_shop,
    h_store: h_store,
    h_card,
    h_menu,
    h_menuad,
    h_zhexian
  },
  data() {
    return {
      form: {
        arr: [{
          ax1: '',
          ax2: ''
        }]
      },
      computdata: '',
      label: "测试组件",
      // 左侧组件库数据
      typeList: {
        // 存放每个组件的数据结构
        text: {
          name: "电脑",
          icon: "el-icon-diannao",
          com: h_Text,
        },
        zhexian: {
          name: "折线",
          icon: "el-icon-zhexian",
          com: h_zhexian,
        },

        // images: {
        //   name: "图片",
        //   icon: "el-icon-picture",
        //   com: h_Image,
        // },
        // search: {
        //   name: "搜索",
        //   icon: "el-icon-search",
        //   com: h_search,
        // },
        // notice: {
        //   name: "公告",
        //   icon: "el-icon-s-promotion",
        //   com: h_notice,
        // },
        // video: {
        //   name: "视频",
        //   icon: "el-icon-video-play",
        //   com: h_video,
        // },
        // swiper: {
        //   name: "轮播图",
        //   icon: "el-icon-turn-off",
        //   com: h_swiper,
        // },
        // product: {
        //   name: "商品列表",
        //   icon: "el-icon-sell",
        //   com: h_product,
        // },
        // divider: {
        //   name: "分割线",
        //   icon: "el-icon-crop",
        //   com: h_divider,
        // },
        // shop: {
        //   name: "店铺介绍",
        //   icon: "el-icon-crop",
        //   com: h_shop,
        // },
        // store: {
        //   name: "进入店铺",
        //   icon: "el-icon-crop",
        //   com: h_store,
        // },
        // card: {
        //   name: "内容卡片",
        //   icon: "el-icon-crop",
        //   com: h_card,
        // },
        // menu: {
        //   name: "导航",
        //   icon: "el-icon-help",
        //   com: h_menu,
        // },
        // menuad: {
        //   name: "图文广告",
        //   icon: "el-icon-help",
        //   com: h_menuad,
        // },
      },
      view: [

      ],
      title: "页面标题",
      type: "",
      index: null, // 当前组件的索引
      isPush: false, // 是否已添加组件

      props: {}, // 传值
      isRight: false,

      className: {
        1: "one",
        2: "two",
        3: "three",
      },
      itemIndex: 999
    };
  },

  mounted() {
    document.getElementsByClassName('main')[0].style.height = document.body.clientHeight - 40 + 'px'
  },


  methods: {
    hanldeAdd() {

      this.form.arr.push({
        ax1: '',
        ax2: '',
      })
    },
    //生成直线
    hanldeGen() {
      const line = document.getElementsByClassName('line')
      console.log(line)
      if (line.length) {
        for (let i = 0; i < line.length; i++) {
          line[i].remove()
        }
      }

      const items = document.getElementsByClassName('item')
      if (!this.form.arr.length) return
      this.form.arr.forEach((item) => {
        if (item.ax1 >= 0 && item.ax2 >= 0 && item.ax1 != item.ax2) {
          drawLine(items[item.ax1], items[item.ax2])

        }
      })

    },
    //删除
    hanldeDeta(index) {
      this.form.arr.splice(index, 1)
    },
    // 提交
    submit() {
      this.computdata = JSON.stringify(this.view);
      console.log(this.view);
      // JSON 转换会丢失 formData
      const form = JSON.parse(JSON.stringify(this.view));

      if (form.length == 1) {
        this.$message.error("请添加模块！");
        return;
      }

      for (let i of form) {
        if (i.data && i.data.length == 0) {
          this.$message.error("请填写完整信息！");
          return;
        }
        if (i.type === "product") {
          i.data = i.data.map((val) => val.productId).join(",");
        }
      }

      this.$message.success(
        "数据提交成功，请按F12打开控制台查看待提交数据集合！"
      );
      console.log(form); // 提交的数据，根据接口形式修改
      return;

      // 上传图片，修改数据字段（兼容接口
      const uploadPromise = {};
      for (let i = 0; i < this.view.length; i++) {
        if (["images", "banner"].includes(this.view[i].type)) {
          uploadPromise[i] = [];
          let list = this.view[i]["data"];
          list.forEach((item, index) => {
            uploadPromise[i].push(
              new Promise((resolve, reject) => {
                const link = item.link;
                const name = item.name;
                imageUpload(item.form)
                  .then((res) => {
                    // 上传图片接口
                    form[i]["data"][index] = {
                      url: res.data.url,
                      link,
                      name,
                    };
                    resolve(res);
                  })
                  .catch((err) => {
                    reject(err);
                  });
              })
            );
          });
        }
      }

      let [len, count] = [Object.keys(uploadPromise).length, 0];
      if (len) {
        for (let i in uploadPromise) {
          Promise.all(uploadPromise[i])
            .then((res) => {
              count++;
              if (count === len) {
                // 提交数据
              }
            })
            .catch((err) => {
              this.$message.error(err);
            });
        }
      } else {
        // 提交数据
      }
    },
    // 切换视图组件
    selectType(item) {
      console.log(this.props, "this.props");
      this.isRight = false;
      this.props = item;
      this.$nextTick(() => (this.isRight = true));
    },
    deleteItem(e, time) {
      e.preventDefault();
      e.stopPropagation();
     
      var index = this.view.findIndex(function (element) {
        return element.time == time
      })
      this.view.splice(index,1)
    
      this.isRight = false;
      this.props = {};
    },
    // 拖拽类型
    dragStart(e) {
      this.type = e.target.dataset.type;
    },
    hanldeLi(val, key) {
      console.log(val, key, new Date().getTime())
      let defaultData = {
        time: new Date().getTime(),
        type: key, // 组件类型
        status: 2, // 默认状态
        data: [], // 数据
        options: {},
        status: 2
      }
      switch (key) {
        case 'text':
          defaultData.options.width = 50
          break;
        case 'zhexian':
          defaultData.options.width = 100
          break;

      }
      this.view = [...this.view, defaultData];
      console.log(this.view)
      this.isPush = false;
    },
    // 结束拖拽
    dragEnd(e) {
      let className = e.target.className;
      console.log(e, '组件拖拽结束', className)
      let defaultData = {
        type: this.type, // 组件类型
        status: 2, // 默认状态
        data: [], // 数据
      }
      switch (this.type) {
        case 'text':
          defaultData.options = {
            width: 50
          };
          break;
        case 'zhexian':
          defaultData.options = {
            width: 100
          };
          break;
        default:

          break;
      }
      this.view.push(defaultData);
      // this.$delete(this.view[this.index], "status");
      this.isPush = false;
      this.type = null;
      this.$nextTick(() => {
        const item = document.getElementsByClassName('item')
        const Len = item.length - 1
        console.log(e.clientY - this.view[Len].options.width / 2, 999)
        this.view[Len].options.top = (e.clientY - this.view[Len].options.width / 2)
        this.view[Len].options.left = (e.clientX - this.view[Len].options.width / 2)
        item[Len].style.top = this.view[Len].options.top + 'px'
        item[Len].style.left = this.view[Len].options.left + 'px'
        console.log(this.view)

      })
    },
    //容器拖拽
    dragEnd1(e) {
      console.log()
      const leftWidth = (window.getComputedStyle(this.$refs.left).width).replace('px', '') * 1
      console.log(leftWidth)
      const item = e.target
      const itemWidth = (window.getComputedStyle(item).width).replace('px', '') * 1
      item.style.top = (e.clientY - itemWidth / 2) + 'px'
      item.style.left = (e.clientX - itemWidth / 2-leftWidth) + 'px'
      const dataIndex = item.getAttribute('data-index')
      var index = this.view.findIndex(function (element) {
        return element.time == dataIndex
      })

      this.view[index].options.top = (e.clientY - itemWidth / 2)
      this.view[index].options.left = (e.clientX - itemWidth / 2-leftWidth)
      console.log(index,this.view)
    },


    // 已放置到指定位置
    drog(e) {
      console.log('以在指定位置')
      if (!this.type) {
        // 内容拖拽
        return;
      }
      e.preventDefault();
      e.stopPropagation();
      this.dragEnd();
    },
    // 移动中
    dragOver(e) {
      if (!this.type) {
        // 内容拖拽
        return;
      }
      e.preventDefault();
      e.stopPropagation();

      let className = e.target.className;
      let name = className !== "view-content" ? "item" : "view-content";
      console.log(name)
      // let defaultData = {}
      // switch (this.type) {
      //   case 'text':
      //     defaultData = {
      //       type: this.type, // 组件类型
      //       status: 2, // 默认状态
      //       data: [], // 数据
      //       options: {
      //         width: 50
      //       }, // 选项操作
      //     };
      //     break;
      //   default:
      //     defaultData = {
      //       type: this.type, // 组件类型
      //       status: 2, // 默认状态
      //       data: [], // 数据
      //       options: {}, // 选项操作
      //     };
      //     break;
      // }
      // console.log(name,9999)

      // if (name == "view-content") {
      //   if (!this.isPush) {
      //     this.index = this.view.length;
      //     this.isPush = true;
      //     this.view.push(defaultData);
      //   }
      // } else if (name == "item") {
      //   let target = e.target;
      //   let [y, h, curIndex] = [
      //     e.offsetY,
      //     target.offsetHeight,
      //     target.dataset.index,
      //   ];
      //   let direction = y < h / 2;

      //   if (!this.isPush) {
      //     // Push to Top or Bottom
      //     if (direction) {
      //       if (curIndex == 0) {
      //         this.view.unshift(defaultData);
      //       } else {
      //         this.view.splice(curIndex, 0, defaultData);
      //       }
      //     } else {
      //       curIndex = +curIndex + 1;
      //       this.view.splice(curIndex, 0, defaultData);
      //     }
      //   } else {
      //     // Moving
      //     if (direction) {
      //       var i = curIndex == 0 ? 0 : curIndex - 1;
      //       var result = this.view[i]["status"] == 2;
      //     } else {
      //       var i = +curIndex + 1;
      //       var result = this.view.length > i && this.view[i]["status"] == 2;
      //     }

      //     if (result) return;

      //     const temp = this.view.splice(this.index, 1);
      //     this.view.splice(curIndex, 0, temp[0]);
      //   }
      //   this.index = curIndex;
      //   this.isPush = true;
      // }
    },
  },
};
</script>

<style lang="less" scoped>
#darag {
  height: 100%;
  display: flex;
  justify-content: space-between;
}

.left,
.right {

  width: 20%;
  max-width: 350px;
  background: #fafaf5;

  h4 {
    text-align: center;
    margin: 20px;
  }


  background: #fff;
}

.left {
  ul {
    margin: 0;
    padding: 0;

    li {
      width: 80px;
      height: 80px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      cursor: default;
      list-style: none;
      font-size: 14px;
      color: #666;
      float: left;
      margin: 0 10px;
      border-radius: 6px;
      transition: all 0.3s;
      cursor: pointer;

      &:hover {
        background: #efefef;
      }

      span {
        display: block;
        font-size: 40px;
        margin-bottom: 8px;
        color: #999;
      }

      p {
        display: block;
        margin: 0;
        font-size: 12px;
      }
    }
  }
}

.right {
  padding: 10px;
}

.main {
  width: 60%;
  background: #fff;


  .view-content {
position: relative;
    width: 100%;
    height: 100%;

    background: #f5f5f5;
    overflow-y: auto;
    overflow-x: hidden;

    box-shadow: 0 2px 6px #ccc;

    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-thumb {
      background: #dbdbdb;
    }

    &::-webkit-scrollbar-track {
      background: #f6f6f6;
    }

    .item {
      position: absolute;
      transition: all 0.3s;
      // background: #fff;

      &:hover {
        transform: scale(0.95);
        border-radius: 10px;
        box-shadow: 0 0 10px #afafaf;

        .el-icon-error {
          display: block;
        }
      }

      div {
        pointer-events: none;
      }

      .wait {
        background: #deedff;
        height: 35px;
        text-align: center;
        line-height: 35px;
        font-size: 12px;
        color: #666;
      }

      .el-icon-error {
        position: absolute;
        right: -10px;
        top: -6px;
        color: red;
        font-size: 25px;
        cursor: pointer;
        display: none;
        z-index: 9999;
      }
    }
  }
}

.chosen {

  border: solid 2px #3089dc !important;
}
</style>